<template>
  <view class="special-progress">
    <view
      class="completed"
      :style="completedWidth"
    >
      <image
        :lazy-load="true"
        class="flower"
        :src="progress_flower"
      />
    </view>
  </view>
</template>

<script>
import { progress_flower } from "@/libs/image-url";
export default {
  name: "SpecialProgress",
  props: {
    progress: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      progress_flower
    };
  },
  computed:{
    completedWidth(){
      return {
        'width':this.progress+'%'
      }
    }
  },
};
</script>

<style lang="scss">
.special-progress {
  height: 28px;
  background: #ffffff;
  border-radius: 100px;
  .completed {
    height: 28px;
    border: 2px solid #a13d0f;
    background: #ffd700;
    border-radius: 100px;
    position: relative;
    .flower{
      position: absolute;
      width: 38px;
      height: 38px;
      right: 0;
      top: 50%;
      transform: translateY(-50%) translateX(50%);
    }
  }
}
</style>
